<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>行为表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/jeui.css"  media="all">
    <link rel="stylesheet" href="../css/skin/jebox.css"  media="all">
    <link rel="stylesheet" href="../css/skin/jedate.css"  media="all">
    <style type="text/css" media="screen">
        .box-center {
            overflow: auto;
        }
    </style>
    <script type="text/javascript" src="../js/modules/jeui.js"></script>
    <script src="https://cdn.wilddog.com/sdk/js/2.5.17/wilddog.js"></script>
    <script src="../js/dataserver.js"></script>
</head>
<body>
    <div jepane="top"  class="je-w100">
        <div class="je-p10">
            <blockquote class="je-quote blue je-f16 je-ovh  je-mb10">
                <p class="je-pb5 checkbox">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="锻炼身体">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="学习进步">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="个人项目">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="编程词汇">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="丑陋的字">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="认真工作">
                    <input type="checkbox" name="checkbox" jename="checkbox" jetext="不再犯规">
                    <button id="search" class="je-btn je-f14">查询</button>
                </p>
            </blockquote> 
        </div>
    </div>
    <div jepane="center" class="je-f14 box-center">
        <div class=" je-p10">
            <table class="je-table" even>
            <thead>
            <tr>
                <th>ID</th>
                <th>时间</th>
                <th>评分</th>
                <th>行为</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tablebody">
            <tr>
                <td colspan="5"  align="center">暂无数据</td>
            </tr>
            </tbody>
        </table>
        </div>
    </div>

<script type="text/javascript">
    function initTable(checkstring) {
        data_getAllFrom("mydata/every",function (data) {
            var html = [];
            for( key in data){
                if(key != "details"){
                    var obj = data[key];
                    if(checkstring){
                        if(checkstring.indexOf(obj.behavior) !== -1){
                            html.push('<tr>');
                            html.push('<td>'+key+'</td>');
                            html.push('<td>'+obj.time+'</td>');
                            html.push('<td>'+obj.grade+'</td>');
                            html.push('<td>'+obj.behavior+'</td>');
                            html.push('<td align="center"><button class="je-btn edit-btn je-btn-small je-f12">编辑</button> <button class="je-btn dele-btn je-btn-small je-bg-red je-f12">删除</button></td>');
                            html.push('</tr>');
                        }
                    }else {
                        html.push('<tr>');
                        html.push('<td>'+key+'</td>');
                        html.push('<td>'+obj.time+'</td>');
                        html.push('<td>'+obj.grade+'</td>');
                        html.push('<td>'+obj.behavior+'</td>');
                        html.push('<td align="center"><button class="je-btn edit-btn je-btn-small je-f12">编辑</button> <button class="je-btn dele-btn je-btn-small je-bg-red je-f12">删除</button></td>');
                        html.push('</tr>');
                    }
                }

            }
            $("#tablebody").html(html.join(""));
        });
    }

    function autoData(dom) {
        var o = {};
        dom.find("[datakey]").each(function () {
            o[$(this).attr("datakey")] = $(this).val();
        });
        return o;
    }

    function getFrom(doms) {
        var html = [];
        html.push('<div class="je-form-pane dayfrom">');
        html.push('<div class="je-form-item">');
        html.push('<label class="je-label je-f14">时间</label>');
        html.push('<div class="je-inputbox"><input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="je-input" datakey="time" value="'+doms.eq(1).text()+'"></div>');
        html.push('</div>');
        html.push('<div class="je-form-item">');
        html.push('<label class="je-label je-f14">评分</label>');
        html.push('<div class="je-inputbox"><input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="je-input" datakey="grade" value="'+doms.eq(2).text()+'"></div>');
        html.push('</div>');
        html.push('<div class="je-form-item">');
        html.push('<label class="je-label je-f14">行为</label>');
        html.push('<div class="je-inputbox"><input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="je-input" datakey="behavior" value="'+doms.eq(3).text()+'"></div>');
        html.push('</div>');
        html.push('</div>');
        return html.join("");
    }

jeui.use(["jquery","jeTable","jeCheck","jeBox","jeLayout"],function () {
    $("body").jeLayout();

    $(".checkbox").jeCheck();
    initTable();
    
    $("#search").click(function () {
        var checks = "";
        $(".je-check.on").each(function () {
            checks += $(this).children(".je-check-text").text();
        });
        initTable(checks);
    });

    $("#tablebody").on("click",".edit-btn",function () {
        var tbs = $(this).parent().siblings();
        jeBox.open({
            title: "修改数据",
            boxSize:["400px","240px"],
            content:getFrom(tbs),
            maskLock : true,
            button: [ {
                name: '修改',
                callback: function(index, id){
                    console.log(autoData($(".dayfrom")));
                    data_updata({
                        url : "mydata/every/"+tbs.eq(0).text(),
                        data : autoData($(".dayfrom")),
                        success : function () {
                            jeBox.close(index);
                            initTable();
                        },
                        fail : function () {
                            jeBox.alert("修改失败");
                        }
                    });
                }
            }]
        });
    });


    $("#tablebody").on("click",".dele-btn",function () {
        var tbs = $(this).parent().siblings();
        data_delete({
            url : "mydata/every/"+tbs.eq(0).text(),
            success : function () {
                jeBox.alert("删除成功");
                initTable();
            },
            fail : function () {
                jeBox.alert("删除失败");
            }
        });
    })

});
</script>
</body>
</html>